<template>
	<view>
		<view class="box">
			<view class="recruitment_title_area flex_box aic">
				<view class="re mr35" @tap="back">
					<image :lazy-load="true" src="/static/icon_arrow_1.png" class="img6 vt"></image>
				</view>
				<view class="item">
					<view class="fs32 fwb cor_000">{{detail.title}}</view>
				</view>
				<view class="fs30 fwb cor_F23">￥<text class="fs42">{{detail.salary}}/小时</text></view>
			</view>

			<view class="menu_content_box">
				<view class="pl15 pr15 pb25">
					<view class="mt20 area_block_1 pt10 pb30">
						<view class="df fw fldr">
							<view class="mt30 wp33 tac" v-for="item,index in detail.infoList">
								<view class="re">
									<image :lazy-load="true" :src="item.icon" class="img10 vt"></image>
								</view>
								<view class="mt15 fs24 fwb cor_000">{{item.key}}</view>
								<view class="mt20 fs22 fwb cor_999">{{item.value}}</view>
							</view>
						</view>
					</view>

					<view class="mt20 area_block_1 pa35">
						<view class="fs32 fwb cor_000">工作介绍</view>
						<view class="mt25 fs24 lh34 cor_333" v-html="detail.introduce"></view>
					</view>

				</view>

			</view>
			<!-- 立刻咨询-按钮 -->
			<view class="consult_immediately_btn" @tap="tel">立刻咨询</view>
		</view><!-- box -->
	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		getPageRecruitApi,
		getRecruitFilterApi,
		getRecruitDetailApi
	} from '@/http/api.js';
	export default {
		data() {
			return {
				id: 0,
				detail: {}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id;
			}
			this.getRecruitDetail();
		},
		methods: {
			getRecruitDetail() {
				showLoading('加载中');
				getRecruitDetailApi({
					id: this.id
				}).then(res => {
					hideLoading();
					this.detail = res.data;
				}).catch(err => {
					hideLoading();
				})
			},

			tel() {
				uni.makePhoneCall({
					phoneNumber: this.detail.phone //仅为示例
				});
			},

			back() {
				uni.redirectTo({
					url: '/pages/job_recruitment/job_recruitment'
				})
			}
		}
	}
</script>

<style>
	.recruitment_title_area {
		position: relative;
		padding: 65rpx 20rpx 0;
		height: 165rpx;
		background-color: #fff;
	}

	.menu_content_box {
		position: relative;
		height: calc(100vh - 263rpx);
		background-color: #f7f6f6;
	}

	.area_block_1 {
		background-color: #fff;
		border-radius: 20rpx;
	}

	.consult_immediately_btn {
		display: block;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		background: linear-gradient(90deg, #f44f33, #e10d09);
	}
</style>
